<template>
  <div>
    <el-container>
      <el-header>
        <!-- 顶部-->
        <div>
          <welTop></welTop>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">

                <el-menu-item index="3" style="width: 200px;">
                  <i class="el-icon-document"></i>
                  <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4" style="width: 200px;">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航四</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main style="height: 500px;">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import welTop from "@/components/welTop"
export default {
  name: "ad-main",
  components: {
    welTop
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 17px;
  /*height: 100px;*/
}

.el-aside {

  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #eee;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
